{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="viggo" />
    <title>{{ web_title }}</title>
    <meta name="keywords" content={{ web_desc }}>
    <meta name="description" content={{ web_desc }}>
    <link rel="shortcut icon" href="{% static 'img.png' %}">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
    <link rel="stylesheet" href="{%  static "assets/css/fonts/linecons/css/linecons.css" %}">
    <link rel="stylesheet" href={%  static "/assets/css/fonts/fontawesome/css/font-awesome.min.css" %}>
    <link rel="stylesheet" href={% static "assets/css/bootstrap.css" %}>
    <link rel="stylesheet" href={% static "assets/css/xenon-core.css" %}>
    <link rel="stylesheet" href={% static "assets/css/xenon-components.css" %}>
    <link rel="stylesheet" href={% static "assets/css/xenon-skins.css" %}>
    <link rel="stylesheet" href={% static "assets/css/nav.css" %}>
    <script src={% static "assets/js/jquery-1.11.1.min.js" %}></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body class="page-body">
    <!-- skin-white -->
    <div class="page-container">
        <div class="sidebar-menu toggle-others fixed">
            <div class="sidebar-menu-inner">
                <header class="logo-env">
                    <!-- logo -->
                    <div class="logo">
                        <a href="/" class="logo-expanded">
                            <img src={% static "logo_l.png" %} width="100" alt="" />
                        </a>
                        <a href="/" class="logo-collapsed">
                            <img src={% static "img.png" %} width="40" alt="" />
                        </a>
                    </div>

                    <div class="mobile-menu-toggle visible-xs">

                        <a href="#" data-toggle="mobile-menu">
                            <i class="fa-bars"></i>
                        </a>
                    </div>
                </header>
                <ul id="main-menu" class="main-menu">
                    {% for item in categories %}
                        {% if item.farther == Null %}
                             <li>
                        <a href="#{{ item.name }}"  {%  if not item.sub_cat.all %} class="smooth" {% endif %}

                        >
                            <i class={{ item.icon_name }}></i>
                            <span class="title">{{ item.name }}</span>
                        </a>
                        {%  if item.sub_cat.all %}
                            <ul>
                            {% for sub in item.sub_cat.all %}
                            <li>
                                <a href="#{{ sub.name }}" class="smooth">
                                    <i class={{ sub.icon_name }}></i>
                                    <span class="title">{{ sub.name }}</span>
                                </a>
                            </li>
                            {% endfor %}
                            </ul>
                        {% endif %}


                    </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="main-content">


            <nav class="navbar user-info-navbar" role="navigation">
                <!-- User Info, Notifications and Menu Bar -->
                <!-- Left links for user info navbar -->
                <ul class="user-info-menu left-links list-inline list-unstyled">
                    <li class="hidden-sm hidden-xs">
                        <a href="#" data-toggle="sidebar">
                            <i class="fa-bars"></i>
                        </a>
                    </li>
                </ul>

                {% if is_show_admin %}
                <ul class="user-info-menu right-links list-inline list-unstyled">
                    <li class="hidden-sm hidden-xs">
                        <a href="/admin/" target="_blank">
                            <i class="fa-gitlab"></i> 管理后台
                        </a>
                    </li>
                    <li class="hidden-sm hidden-xs">
                        <a href="/logout/" target="_blank">
                            <i class="fa-gitlab"></i> 退出登录
                        </a>
                    </li>

                </ul>
                {% endif %}

            </nav>


                 <!--搜索框-->

        <div class="row col-md-offset-4 col-lg-offset-4col-xl-offset-4" style="margin-bottom:3em;margin-top: 5em">
          <div class="col-lg-6" >
            <div class="input-group input-group-lg">
                <input type="text" id="keywords"  class="form-control" placeholder="Search for...">
                <div class="input-group-btn">
                 <button type="button" id="search_type" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">必应<span class="caret"></span></button>
                <ul id ="search_menu" class="dropdown-menu">
        </ul>
      </div>


            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
            <script>
                document.getElementById("keywords").addEventListener("input",function (){
                    keywords = document.getElementById("keywords").value;
                    console.log(keywords)
                    fetch("search/?keywords="+keywords)
                        .then(response => response.json())
                        .then(data =>{
                            let navs = data["navs"]
                            let navs_div = document.getElementById("navs")
                            navs_div.innerHTML = "";
                            for(let nav in navs){
                                navs_div.innerHTML += '<h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="'+nav+'"></i>'+nav+'</h4>'
                                let html_str = '<div CLASS="row">'
                                for(let i =0;i<navs[nav].length;++i){
                                    let item = navs[nav][i]
                                    html_str +=` <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('${ item.url }', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="${ item.url }">
                        <div class="xe-comment-entry">
                            <a class="xe-user-img" style="height: 40px;width: 40px">
                                <img src="${ item.image.url }" class="lozad img-circle" width="40">
                            </a>
                            <div class="xe-comment">
                                <a href="${ item.url }$"  target="_blank" class="xe-user-name overflowClip_1">
                                    <strong>${ item.name }</strong>
                                </a>
                                <p class="overflowClip_2">${ item.description}</p>
                            </div>
                        </div>
                    </div>
                </div>`
                                }
                                html_str += '</div> <br />'
                                navs_div.innerHTML += html_str
                            }
                        })
                        .catch(error => console.error('Error:', error));
                })

            </script>
            <script>
                    search_type = document.getElementById("search_type")

                    function change_type(element){
                        search_type.textContent = element.textContent
                        search_type.innerHTML+= '<span class="caret"></span>'
                    }
                    search_list = {
                        "百度":"https://www.baidu.com/s?wd=",
                        "duckduckgo":"https://duckduckgo.com/?t=h_&q=",
                        "谷歌":"https://www.google.com/search?q=",
                        "必应":"https://www.bing.com/search?q="
                    }
                    search_menu = document.getElementById("search_menu")

                    for(let item in search_list){
                        search_menu.innerHTML += '<li><a onclick="change_type(this)">'+item+'</a> </li>'
                    }
                    function search(){

                            url = search_list[search_type.textContent]+keywords;
                            window.open(url, '_blank')

                    }
                    document.getElementById("keywords").addEventListener("keydown",function (event){
                        if(event.key === "Enter"){
                            search();
                        }

                    })

            </script>

            <!-- 搜索框end-->
            <div id="navs">
             <!-- 常用推荐 -->
                {% for items in categories %}
               {% if 0 < items.nav_set.count  %}
                    <h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="{{ items.name }}"></i>{{ items.name }}</h4>
                <div CLASS="row">
                {% for item in items.nav_set.all %}
                    {% if not item.permission or is_show_admin %}
                        <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('{{ item.url }}', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="{{ item.url }}">
                        <div class="xe-comment-entry">
                            <a class="xe-user-img">
                                <img data-src="{{ item.image.image.url }}" class="lozad img-circle" width="40">
                            </a>
                            <div class="xe-comment">
                                <a href="{{ item.url }}"  target="_blank" class="xe-user-name overflowClip_1">
                                    <strong>{{ item.name }}</strong>
                                </a>
                                <p class="overflowClip_2">{{ item.description}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                    {% endif %}
                {% endfor %}
                </div>
                 <br />
               {% endif %}
            {% endfor %}
            </div>
        </div>

    </div>
    <!-- 锚点平滑移动 -->
    <script type="text/javascript">
    $(document).ready(function() {
         //img lazy loaded
         const observer = lozad();
         observer.observe();

        $(document).on('click', '.has-sub', function(){
            var _this = $(this)
            if(!$(this).hasClass('expanded')) {
               setTimeout(function(){
                    _this.find('ul').attr("style","")
               }, 300);

            } else {
                $('.has-sub ul').each(function(id,ele){
                    var _that = $(this)
                    if(_this.find('ul')[0] != ele) {
                        setTimeout(function(){
                            _that.attr("style","")
                        }, 300);
                    }
                })
            }
        })
        $('.user-info-menu .hidden-sm').click(function(){
            if($('.sidebar-menu').hasClass('collapsed')) {
                $('.has-sub.expanded > ul').attr("style","")
            } else {
                $('.has-sub.expanded > ul').show()
            }
        })
        $("#main-menu li ul li").click(function() {
            $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
            $(this).addClass('active'); // 添加当前元素的样式
        });
        $("a.smooth").click(function(ev) {
            ev.preventDefault();

            public_vars.$mainMenu.add(public_vars.$sidebarProfile).toggleClass('mobile-is-visible');
            ps_destroy();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top - 30
            }, {
                duration: 500,
                easing: "swing"
            });
        });
        return false;
    });

    var href = "";
    var pos = 0;
    $("a.smooth").click(function(e) {
        $("#main-menu li").each(function() {
            $(this).removeClass("active");
        });
        $(this).parent("li").addClass("active");
        e.preventDefault();
        href = $(this).attr("href");
        pos = $(href).position().top - 30;
    });
    </script>
    <!-- Bottom Scripts -->
    <script src={% static "assets/js/bootstrap.min.js"%}></script>
    <script src={% static "assets/js/TweenMax.min.js"%}></script>
    <script src={% static "assets/js/resizeable.js"%}></script>
    <script src={% static "assets/js/joinable.js"%}></script>
    <script src={% static "assets/js/xenon-api.js"%}></script>
    <script src={% static "assets/js/xenon-toggles.js" %}></script>
    <!-- JavaScripts initializations and stuff -->
    <script src={% static "assets/js/xenon-custom.js"%}></script>
    <script src={% static "assets/js/lozad.js" %}></script>
</body>

</html>
